<!--
 * @Author: wangding
 * @Date: 2020-10-30 15:34:39
 * @LastEditTime: 2021-01-05 14:47:27
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\system\externalInterface\index.vue
-->
<template>
    <div>
        <div class="search-box">
            <div class="search-box-sub">
                <span class="lable-text">{{$t('system-accessor')}}</span>
                <el-input style="width:160px;" v-model="accessName" :placeholder="$t('pleaseInput')"></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">tokenId</span>
                <el-input style="width:160px;" v-model="tokenId" :placeholder="$t('pleaseInput')"></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('opttask.status')}}</span>
                <el-select v-model="status" filterable :placeholder="$t('index.selectStates')" :clearable='true'>
                    <el-option
                    v-for="item in statusList"
                    :key="item.id"
                    :label="item.text"
                    :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="search-box-sub">
                <el-button type="primary" @click='query'>{{$t('query')}}</el-button>
            </div>
        </div>
        <div class="button-box">
            <el-button type="primary" icon='el-icon-edit' class="marginR10" @click="()=>{$store.commit('setApiVisible',true)}">{{$t('add')}}</el-button>
        </div>
        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe   :column='column' :select='false'>
            <template #tokenId="{data}">
                <a href="javascript:;" :title='data.tokenId' v-copy='data.tokenId'>{{data.tokenId | stringLength(6)}}</a>
            </template>
            <template #status="{data}">
                {{returnStatus(data.status)}}
            </template>
            <template #type="{data}">
                {{returnType(data.type)}}
            </template>
            <template #option="{data}">
                <div class="option-box">
                    <el-button size='small' type="primary" icon="el-icon-edit"  @click='editApi(data)' class="marginR10" :title="$t('edit')"></el-button>
                    <el-button v-if='data.status != 1' size='small' type="primary" icon="el-icon-error"  @click='apiDeleteApi(data.sid)' class="marginR10" :title="$t('system-out-of-time')"></el-button>
                </div>
            </template>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
        <add @uploadData='query' v-if='apiVisible'></add>
        <edit @uploadData='query' :editRowsData='editRowsData'></edit>
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTableNew'
import add from './add.vue'
import edit from './edit.vue'
export default {
    components: {
        baseTable,
        add,
        edit
    },
    props: {

    },
    data() {
        return {
            editRowsData:{},
            size:10,
            current:1,
            total:1,
            accessName:'',
            tokenId:'',
            status:'',
            statusList:[{
                id:'0',
                text: this.$t('system-in-time')
            },{
                id:'1',
                text: this.$t('system-out-time')
            }],
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('system-accessor'),
                value: 'accessName',
                min_width:'120'
            },
            {
                title: 'tokenId',
                value: 'tokenId',
                slot: 'tokenId',
                width:'90'
            },
            {
                title: this.$t('system-access-time-month'),
                value: 'accessKeepMonth',
                slot: 'accessKeepMonth',
                width:'100'
            },
            {
                title: '峰值频率(次/秒)',
                value: 'peakFrequency',
                slot: 'peakFrequency',
                width:'100'
            },
            {
                title: '日调用频率（次/日）',
                value: 'dailyFrequency',
                slot: 'dailyFrequency',
                width:'110'
            },
            {
                title: '接入时间',
                value: 'accessTime',
                slot: 'accessTime',
                width:'145'
            },
            {
                title: '过期时间',
                value: 'expireTime',
                slot: 'expireTime',
                width:'145'
            },
            {
                title: '用户类型',
                value: 'type',
                slot: 'type'
            },
            {
                title: '名称',
                value: 'firmName',
                slot: 'firmName',
                min_width:'120'
            },{
                title: '状态',
                value: 'status',
                slot: 'status',
                width:'70'
            },{
                title: '操作',
                value: 'sid',
                slot: 'option',
                width:'70'
            }]
        };
    },
    computed: {
        apiVisible(){
            return this.$store.state.sysStore.apiVisible
        }
    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.apiGetApis()
    },
    methods: {
        async apiDeleteApi(id){
            let res = await this.API.apiDeleteApi({
                id:id
            })
            if(res.success){
                this.$message({
                message: '操作成功',
                type: 'success'
                });
                this.query()
            }else{
                this.$message({
                message: '操作失败',
                type: 'warning'
                });
            }
        },
        editApi(data){
            this.editRowsData = data
            this.$store.commit('setApiVisibleEdit',true)
        },
        showAddModal(){

        },
        async apiGetApis(){
            this.loading = true
            let res = await this.API.apiGetApis({
                size:this.size,
                current:this.current,
                accessName: this.accessName,
                tokenId: this.tokenId,
                status: this.status
            })
            this.total = res.total
            this.dataRows = res.rows
            this.loading = false
        },
        query(){
            this.current = 1
            this.apiGetApis()
        },
        returnStatus(value){
            if(value==0){
		        return '未过期';
            }else if(value==1){
                return '已过期';
            }else{
                return '-';
            }
        },
        returnType(value){
            if(value==0){
                return '用户';
            }else if(value==1){
                return '组织';
            }else{
                return '-';
            }
        },
        handleCurrentChange(val) {
          this.current = val
          this.apiGetApis()
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.apiGetApis()
        },
    },
};
</script>

<style  lang="less" scoped>

</style>
